﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

	<style type="text/css">
		/*
		YUI 3.4.1 (build 4118)
		Copyright 2011 Yahoo! Inc. All rights reserved.
		Licensed under the BSD License.
		http://yuilibrary.com/license/
		*/
		html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}

		
		
		html,
		body {
			height: 100%;
			overflow: hidden;
		}
		
		
		#logo-bar {
			height: 42px;
		}
		
		#logo-bar h1 {
			background: transparent url() no-repeat top left;	
			text-indent: -99999px;
			height: 29px;
			width: 185px;
			position: relative;
			top: 6px;
			left:17px;
		}
		
		#top-grey-bar {
			background-color: whiteSmoke;
			height: 40px;
			border-top: 1px solid #e5e5e5;
			border-bottom: 1px solid #e5e5e5;
		}
		
		#manage-bar {
			height: 36px;
			border-bottom: 1px solid #e5e5e5;
			margin: 0 3px;
		}
		
		iframe {
			margin: 0 0;
		}
		
		#bottom-video-bar {
			border-top: 1px solid #e5e5e5;
			background-color: whiteSmoke;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 160px;
			display: none;
		}
		
	</style>

	<script src="js/helpers/json2.min.js"></script>



</head>
<body>


	<div id="logo-bar">
		<h1>Google+ Hangouts</h1>
	</div>
	<div id="top-grey-bar"></div>
	<div id="manage-bar"></div>
	<!-- Google Hangout look and feel -->

	<iframe id="__gadget_3" 
		name="__gadget_3"
		src="gadget.xml.html" 
		scrolling="no"
		marginwidth="0"
		marginheight="0"
		frameborder="0"
		vspace="0"
		hspace="0"
		height="200"
		width="320"
		style="height: 100%; width: 100%;"></iframe>

	<div id="bottom-video-bar"></div>


		<script>
			var EIFrame = document.getElementById("__gadget_3");


			window.addEventListener("message", handleCMD, false);

			function handleCMD(event) {

				var data = JSON.parse(event.data),
				cmdData = data.cmd.split("."),
				method = cmdData.splice(cmdData.length - 1).toString(),
				namespace = cmdData.join(".");

				console.log("Hangout UI received command: " + cmdData.join("."));

				switch (namespace) {

					case "gapi.hangout.av":

						switch (method) {

							case "clearAvatar":
								console.log("Hangout UI send command: gapi.hangout.av.hi");
								EIFrame.contentWindow.postMessage(JSON.stringify({ cmd: "gapi.hangout.av.hi", data: { test: "hi"} }), "*");
								break;

							case "setCameraMute":
								


								break;

						}

						break;

				}

			}  

	</script>


</body>
</html>
